<template>
  <el-container>
    <el-header>
      <div class="left-pannel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.jobName" placeholder="任务名称" clearable></el-input>
          <el-button type="primary" icon="el-icon-search"></el-button>
        </div>
      </div>
    </el-header>

    <list @run="run" @edit="edit" @logs="logs" @del="del" :apiObj="apiObj" :params="search"></list>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>

    <el-drawer title="计划任务日志" v-model="dialog.logsVisible" :size="600" direction="rtl" destroy-on-close>
      <logs></logs>
    </el-drawer>
  </el-container>
</template>

<script>
import saveDialog from "./save"
import logs from "./logs"
import list from './list.vue'

export default {
  name: "task",
  components: {
    saveDialog,
    logs,
    list
  },
  provide() {
    return {
      list: this.list
    }
  },
  data() {
    return {
      search: {
        jobName: undefined,
        jobGroup: undefined,
        status: undefined
      },
      list: [],
      apiObj: {
        get: this.$API.system.job.list.get
      },
      dialog: {
        save: false,
        logsVisible: false
      }
    }
  },
  mounted() {
    this.getJobs()
  },
  methods: {
    dataChange(res, listData) {
      this.list = listData
    },
    add() {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    },
    edit(task) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(task)
      })
    },
    del(task) {
      this.$confirm(`确认删除 ${task.title} 计划任务吗？`, "提示", {
        type: "warning",
        confirmButtonText: "删除",
        confirmButtonClass: "el-button--danger"
      })
        .then(() => {
          this.list.splice(
            this.list.findIndex((item) => item.id === task.id),
            1
          )
        })
        .catch(() => {
          //取消
        })
    },
    logs() {
      this.dialog.logsVisible = true
    },
    run(task) {
      this.$message.success(`已成功执行计划任务：${task.title}`)
    },
    //本地更新数据
    handleSuccess(data, mode) {
      if (mode == "add") {
        data.id = new Date().getTime()
        this.list.push(data)
      } else if (mode == "edit") {
        this.list
          .filter((item) => item.id === data.id)
          .forEach((item) => {
            Object.assign(item, data)
          })
      }
    }
  }
}
</script>

<style scoped>
.job-page {
  height: 100%;
}


.task-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.task-add:hover {
  color: #409eff;
}
.task-add i {
  font-size: 30px;
}
.task-add p {
  font-size: 12px;
  margin-top: 20px;
}

.dark .task-item .bottom {
  border-color: var(--el-border-color-light);
}
</style>
